<template>
  <view class="">
    <!-- 视频区域 -->
    <view class="video-section">
      <text class="section-title">
        <text class="title-icon">◈</text>
        璀璨物理瑰宝
      </text>
      <view class="video-grid">
        <view 
          v-for="(video, index) in videoList" 
          :key="index"
          class="video-card"
        >
          <video
            :src="video.url"
            :poster="video.poster"
            class="video-player"
            object-fit="cover"
            show-center-play-btn
          ></video>
          <view class="video-info">
            <text class="video-title">{{ video.title }}</text>
            <text class="video-desc">{{ video.description }}</text>
          </view>
        </view>
      </view>
      <view class="upload-more">
        等待上传更多视频
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/userStore'

const url = $url
const userStore = useUserStore()

// 动画类名
const animationClass = ref('')

// 总图片数量
const totalImages = 6

// 物理实验信息
const danceInfo = ref([
  {
    title: '力学实验',
    description: '通过实验验证牛顿运动定律',
    likes: 0,
    favorites: 0
  },
  {
    title: '电磁实验',
    description: '探索电磁现象的基本原理',
    likes: 0,
    favorites: 0
  },
  {
    title: '光学实验',
    description: '研究光的传播特性',
    likes: 0,
    favorites: 0
  },
  {
    title: '热学实验',
    description: '了解热力学基本规律',
    likes: 0,
    favorites: 0
  },
  {
    title: '声学实验',
    description: '探索声音的传播特性',
    likes: 0,
    favorites: 0
  },
  {
    title: '量子实验',
    description: '了解量子力学基本原理',
    likes: 0,
    favorites: 0
  }
])

// 当前显示的图片索引
const currentIndex = ref(0)

// 从 store 中获取用户反馈数据
const userLikes = computed(() => userStore.userInfo.likes || {})
const userFavorites = computed(() => userStore.userInfo.favorites || {})

// 计算当前图片是否被点赞/收藏
const isLiked = computed(() => userLikes.value[`dance_${currentIndex.value}`])
const isFavorited = computed(() => userFavorites.value[`dance_${currentIndex.value}`])

// 切换图片时添加动画
const prevImage = () => {
  if (currentIndex.value > 0) {
    animationClass.value = 'animate__animated animate__slideInLeft'
    currentIndex.value--
    setTimeout(() => {
      animationClass.value = ''
    }, 500)
  }
}

const nextImage = () => {
  if (currentIndex.value < totalImages - 1) {
    animationClass.value = 'animate__animated animate__slideInRight'
    currentIndex.value++
    setTimeout(() => {
      animationClass.value = ''
    }, 500)
  }
}

// 处理点赞/收藏
const handleLike = () => {
  const imageKey = `dance_${currentIndex.value}`
  const newLikes = { ...userLikes.value }
  const newFavorites = { ...userFavorites.value }

  if (newLikes[imageKey]) {
    // 取消点赞
    delete newLikes[imageKey]
    danceInfo.value[currentIndex.value].likes--
  } else {
    // 添加点赞并移除收藏
    newLikes[imageKey] = true
    delete newFavorites[imageKey]
    danceInfo.value[currentIndex.value].likes++
    if (userFavorites.value[imageKey]) {
      danceInfo.value[currentIndex.value].favorites--
    }
  }

  // 更新 store
  userStore.updateUserInfo({
    ...userStore.userInfo,
    likes: newLikes,
    favorites: newFavorites
  })
}

const handleFavorite = () => {
  const imageKey = `dance_${currentIndex.value}`
  const newFavorites = { ...userFavorites.value }

  if (newFavorites[imageKey]) {
    // 取消收藏
    delete newFavorites[imageKey]
    danceInfo.value[currentIndex.value].favorites = (danceInfo.value[currentIndex.value].favorites || 0) - 1
  } else {
    // 添加收藏
    newFavorites[imageKey] = true
    danceInfo.value[currentIndex.value].favorites = (danceInfo.value[currentIndex.value].favorites || 0) + 1
  }

  // 更新 store
  userStore.updateUserInfo({
    ...userStore.userInfo,
    favorites: newFavorites
  })
}

// 视频列表数据
const videoList = ref([{
    title: '天工开物',
    description: '致敬中国古代物理人',
    url: 'https://epoch.jxksd.top/image/phy.mp4',
    poster: 'https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft15.baidu.com%2Fit%2Fu%3D1836442751%2C227492520%26fm%3D225%26app%3D113%26f%3DJPEG%3Fw%3D3840%26h%3D2560%26s%3D72AAB1454C972FE11E0DCC8C0300F093&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1744203692&t=884576814653ca6413d1afbf71d4cc82'
  },
  {
    title: '圣人墨子',
    description: '中国古代伟大的科学家',
    url: 'https://epoch.jxksd.top/image/vedio.mp4',
    poster: 'https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft14.baidu.com%2Fit%2Fu%3D6581417825221376920%2C16006736083911919821%26fm%3D3008%26app%3D3011%26f%3DJPEG&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1744203132&t=d61c4ec778f9a547c4bdf0dafd900131'
  },
  {
    title: '物理妙用',
    description: '中国古人妙用物理',
    url: 'https://epoch.jxksd.top/image/vedio.mp4',
    poster: 'https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft11.baidu.com%2Fit%2Fu%3D1836566144%2C2656931346%26fm%3D220%26app%3D103%26f%3DJPEG%3Fw%3D1920%26h%3D1080&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1744203132&t=19f5c4ccee01aab8dee059cbfa76b625'
  },
  
])
</script>

<style lang="scss" scoped>
.dance-container {
  min-height: 40vh;
  background: #f8f8f8;
  padding: 40rpx;
}
.upload-more {
  text-align: center;
  color: #666;
  margin-top: 20rpx;
  font-size: 28rpx;
}  
.card-container {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.image-section {
  position: relative;
  width: 100%;
  height: 500rpx;
  overflow: hidden;
  
  &.animate__slideInLeft,
  &.animate__slideInRight {
    animation-duration: 0.5s;
  }
  
  .dance-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-desc {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      display: block;
      margin-bottom: 10rpx;
    }

    .desc {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }
  
  .image-counter {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8rpx 16rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
  }
}



.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  
  .nav-btn {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
  
    
    &:disabled {
      opacity: 0.5;

    }
    
    &:active {

    }
  }
}

.reaction-buttons {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  
  .reaction-btn {
    display: flex;
    align-items: center;
    gap: 10rpx;
    border: none;
    background: #f0f0f0;
    color: #666;
    
    &.active {
      background: var(--td-brand-color);
      color: #fff;
    }
    
    &.like.active {
      background: #28a745;
    }
    
    &.favorite.active {
      background: #ffc107;
      color: #fff;
    }
    
    .bi {
      font-size: 32rpx;
    }
    
    .count {
      font-size: 28rpx;
    }
  }
}

// 添加视频区域样式
.video-section {
  margin-top: 40rpx;
  padding: 20rpx;

 
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30rpx;
  margin-top: 20rpx;
}

.video-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .video-player {
    width: 100%;
    height: 400rpx;
  }

  .video-info {
    padding: 20rpx;

    .video-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }

    .video-desc {
      font-size: 28rpx;
      color: #666;
    }
  }
}

// 修改导航按钮样式
.nav-btn {
  background: var(--td-brand-color-1);
  color: var(--td-brand-color);
  
  &:disabled {
    opacity: 0.5;
    background: #e0e0e0;
  }
  
  &:active {
    background: var(--td-brand-color-2);
  }
}

// 修改反应按钮样式
.reaction-btn {
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
}

// 添加动画相关样式
.animate__animated {
  animation-duration: 0.5s;
}
</style>
